<script>
import {createModelForVue, createProps} from "@/utils";
import {createFormDefinition} from "@/components/form/type";
import FormEngineContext from "@/components/FormEngine/FormEngineContext";
import FormEngineRender from "@/components/FormEngine/FormEngineRender";

export default {
  name: 'FormEngine',
  model: createModelForVue('formModel'),
  props: {
    formDefinition: createProps(Object, createFormDefinition),
    view: createProps(String),
    formModel: createProps(Object, () => undefined),
  },
  data() {
    return {
      context: undefined,
    }
  },
  render() {
    console.log('rnder', this.view)
    return this.wrapper(this.doRender())
  },
  methods: {
    wrapper(vnodes) {
      return this.$createElement('div', {class: 'form-engine'}, vnodes);
    },
    createContext() {
      return new FormEngineContext({
        formDefinition: this.formDefinition,
        view: this.view,
        formModel: this.formModel,
        vue: this
      });
    },
    change(v) {
      this.$emit('change', v);
    },
    doRender() {
      this.context = this.context || this.createContext();
      this.context.view = this.view;
      this.context.formDefinition = this.formDefinition;
      return FormEngineRender.render(this.context);
    },
  },

}
</script>